<!-- @format -->
<template>
  <div class="relative w-full">
    <div class="pic-mountain"></div>
    <div class="main-container">
      <!-- 登录表单 -->
      <div class="login-box flex flex-col p-[20px]">
        <!-- tab -->
        <div class="login-tab flex justify-center items-center">
          <span class="span-font">{{type === 'login' ? '登录逼盘' : '注册用户'}}</span>
        </div>
        <!-- form -->
        <div class="flex-1 flex justify-center items-center">
          <el-form class="flex-1" :model="userForm" ref="form" label-width="50px" label-position="top" :rules="rules">
            <el-form-item label="用户名:" prop="username">
              <el-input v-model="userForm.username" type="text" placeholder="请输入用户名" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
              <el-input v-model="userForm.password" type="password" placeholder="请输入密码" clearable show-password>
              </el-input>
            </el-form-item>
            <el-form-item label="确认密码:" v-if="type === 'reg'" prop="repassword">
              <el-input v-model="userForm.repassword" type="password" placeholder="请输入确认密码" clearable show-password>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="w-full" type="primary" size="default" @click="onSubmit">
                立即{{type === 'login' ? '登录' : '注册'}}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="h-[100px]w-full">
          <div class="flex">
            <div class="flex justify-between w-full items-center">

              <el-checkbox :label="type === 'login' ? '记住密码' : '同意协议'" v-model="isCheckPawword"></el-checkbox>
              <div class="flex">
                <el-link type="primary" :underline="false" @click="changeShowPage">
                  {{type === 'login' ? '注册' : '登录'}}
                </el-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pic-details flex flex-col">
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import userStore from '@/stores/user'
import type { FormRules } from 'element-plus'
const Store = userStore()

const userForm = reactive({
  username: '',
  password: '',
  repassword: ''
})

const rules = reactive<FormRules>({
  username: [{ required: true, message: '用户名不应为空', trigger: 'blur' }, { min: 6, max: 20, message: '用户名应为6-20位字符', trigger: 'blur' }],
  password: [{ required: true, message: '密码不应为空', trigger: 'blur' }, { min: 6, max: 20, message: '密码应为6-20位字符', trigger: 'blur' }],
  repassword: [{ required: true, message: '确认密码不应为空', trigger: 'blur' }, { min: 6, max: 20, message: '密码应为6-20位字符', trigger: 'blur' }]
})

const isCheckPawword = ref(false)
const type = ref('login')


const onSubmit = async () => {
  const message = type.value === 'login' ? '登录成功' : '注册成功'

  await Store.userActions({ url: '/' + type.value, data: userForm, message })

}

const changeShowPage = () => {
  type.value === 'login' ? type.value = 'reg' : type.value = 'login'
}



</script>

<style lang="scss" scoped >
.el-input__wrapper {
  padding: 0 !important;
}

.login-tab {
  height: 67px;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  position: relative;
  color: #666;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 100px;
    right: 100px;
    height: 3px;
    background-color: #2777f8;
  }

  .span-font {
    font-size: 18px;
  }
}

.login-box {
  position: absolute;
  top: 46%;
  right: 0;
  width: 357px;
  min-height: 420px;
  margin-top: -186px;
  background-color: #fff;
  box-shadow: 0 0 36px 0 rgb(222 233 255 / 5%), 0 0 12px 0 rgb(216 227 250 / 40%);
  border-radius: 8px;
  border: 1px solid #dee4ee;
}

.main-container {
  position: relative;
  width: 1020px;
  height: calc(100vh - 232px);
  min-height: 500px;
  margin: auto;
}

.pic-details {
  position: absolute;
  top: 50%;
  left: -27px;
  width: 538px;
  height: 388px;
  margin-top: -190px;
  background-image: url(//cdnres.115.com/site/static/style_v10.0/login/images/pic_left_det.svg?_vh=cabaaf7_61);
  background-repeat: no-repeat;
  background-position: bottom right;
}

.pic-mountain {
  position: absolute;
  left: 0;
  right: calc(50% - 250px);
  bottom: calc(50% - 150px);
  padding-top: 21.71%;
  background-image: url(//cdnres.115.com/site/static/style_v10.0/login/images/mountain.svg?_vh=1030d59_61);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}
</style>
